<!DOCTYPE html PUBLIC "-//W3C//DTD XHMTL 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhmtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="uft-8"/>
<title>节目时钟</title>
</head>
<body>
<canvas id="drawing" width="800" height="800" sytle="border:#0F0 solid 1px">program clock</canvas>
<script>
    var min;
    var hour;
    var second;
    var offset =0;
    function drawClock(){
        var drawing=document.getElementById("drawing");
        if(drawing.getContext){
		        var context=drawing.getContext("2d");
            context.beginPath();
		        context.arc(400,400,399,0,2*Math.PI,false);

            context.moveTo(790,400);
	          context.arc(400,400,390,0,2*Math.PI,false);


      //for( i=0; i<60; i++ ){
      //          context.moveTo(400)
      //      }

            //draw 12 oclock
            context.moveTo(400,10);
            context.lineTo(400,20);

            //draw 3 oclock
            context.moveTo(790,400);
            context.lineTo(780,400);

            //draw 6 oclock
            context.moveTo(400,790);
            context.lineTo(400,780);

            //draw 9 oclock
            context.moveTo(10,400);
            context.lineTo(20,400);


		        context.translate(400,400);

		        context.font="bold 20px Arial";
		        context.textAlign="center";
		        context.textBaseline ="middle";
		        context.fillText("12",0,-370);

		        context.strokeStyle="rgba(0,0,255)";
		        context.stroke();
		   }
	}
  drawClock();
  setInterval("clock()",1000);

  function clearPreviousSecMinHour(context,min,hour,second){
      context.clearRect(0,0,800,800);
  }


   function drawMobilePhone(context,leftBottomX,leftBottomY){

      var mobileWidth =  40;
      var mobileHeight = 80;
      context.moveTo(leftBottomX,leftBottomY);
      context.rect(leftBottomX,leftBottomY,leftBottomX+mobileWidth,leftBottomY-mobileHeight);

   }



	function clock(){

  	   var context=drawing.getContext("2d");

       context.translate(-400,-400);
       clearPreviousSecMinHour(context,min,hour,second);
       drawClock();

  	   var d = new Date();
    	 min = 58; //d.getMinutes();
  	   hour = d.getHours();
       second = d.getSeconds();

       context.moveTo(0,0);
       context.lineTo(360*Math.sin(2*Math.PI*second*6/360),-360*Math.cos(2*Math.PI*second*6/360));

  	   context.moveTo(0,0);
       context.lineTo(280*Math.sin(2*Math.PI*min*6/360),-280*Math.cos(2*Math.PI*min*6/360));

       //draw Hour line
		   console.log(d.getHours());
       context.moveTo(0,0);
       context.lineTo(200*Math.sin(2*Math.PI*(hour*30+min*30/60)/360),-200*Math.cos(2*Math.PI*(hour*30+min*30/60)/360));

      if( min === 58 ) {

         if(offset < 55 ) {
             offset = second;
            drawMobilePhone(context,-5+offset,5-offset);
         }
         if( offset > 55 ) {
             offset =55;
         }
       }

		   context.strokeStyle="rgba(0,0,255)";
		   context.stroke();
	}

</script>
</body>
</html>
